  <template>
  <div class="table-wrapper">
    <el-table :data="tableData" style="width: 100%" height="160px">
      <el-table-column prop="cameraName" label="摄像头" align="left" width="90">
      </el-table-column>
      <el-table-column prop="task_type" label="匹配算法" align="center">
      </el-table-column>
      <el-table-column prop="task_name" label="检测内容" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="60"
        ><el-button size="medium" type="text"
          ><img src="..\..\assets\image\当前监测-查看-icon.png"
        /></el-button>
        <el-button size="medium" type="text" style="margin-left: 5px"
          ><img src="..\..\assets\image\当前监测-设置-icon.png"
        /></el-button>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="4"
      :total="total"
      :pager-count="5"
      prev-text="上一页"
      next-text="下一页"
      :hide-on-single-page="true"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script >
export default {
  data() {
    return {
      tableData: [],
      pageno: 1,
      total: 0,
    };
  },
  mounted() {
    this.getData();
    setInterval(() => {
      this.getData(); // 修改数据date
    }, 5000);
  },
  methods: {
    spl(str) {
      return str.trim().split(" ")[1];
    },
    handleCurrentChange(val) {
      this.pageno = val;
      this.getData();
    },
    getData() {
      this.$http
        .get("http://szls.chiefdata.net/server/cameraTask/cameralist", {
          params: {
            pageNo: this.pageno,
            pageSize: 4,
          },
        })
        .then(
          (response) => {
            this.tableData = response.body.obj.records;
            console.log(response);
            this.total = response.body.obj.total;
          },
          (response) => {
            console.log("请求失败");
          }
        );
    },
  },
};
</script>

<style lang="less" scoped>
// 表格样式
/deep/ .el-table {
  background-color: transparent !important;
}
/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border-bottom: 0px solid #ebeef5;
}
/deep/ .el-table th {
  color: #ffffff; /* 字体颜色 */
  font-size: 14px;
  background-color: transparent !important; /* 背景透明 */
  border: 0;
  text-align: center;
  padding: 0px 0;
  height: 24px;
  font-weight: normal;
}
/deep/ .el-table tr,
/deep/.el-table td {
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  padding: 0px 0;
  background-color: transparent; /* 背景透明 */
  border: 0;
  height: 24px;
}
/deep/ tbody tr:nth-child(1),
/deep/ tbody tr:nth-child(3) {
  background-color: #142766;
}
/deep/.el-table::before {
  background-color: transparent;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: rgba(256, 256, 256, 0.25) !important;
}

// 分页样式
/deep/ .el-pagination.is-background .el-pager li {
  background-color: transparent;
  border: 1px solid #ffffff;
  font-size: 10px;
  border-radius: 4px;
  min-width: 20px;
  line-height: 18px;
  height: 20px;
}
/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev {
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 15px;
  width: 60px;
  height: 20px;
}

/deep/.el-pagination span:not([class*="suffix"]) {
  font-size: 10px;
  line-height: 18px;
}
/deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager li {
  color: #ffffff;
}

/deep/.el-button--medium {
  padding: 8px 0px;
}
/deep/ .el-table__empty-text {
  line-height: 175px;
}
</style>
